<template>
  <div class="btn">
    <button :style="style" @touchstart="Starts" @touchend="Ends" :disabled="dis" @click="to">
      {{text}}
      <i class="iconfont icon-jinru" v-if="icon===1"></i>
      <img src="../../assets/img/TestInfo/2-icon.png" v-if="icon===2" alt="">
      <!--<i class="iconfont icon-jinruwodezhuanshu" v-if="icon===2"></i>-->
    </button>
  </div>
</template>

<script>
  import '../../assets/css/components/btn/index.css'

  export default {
    name: 'btn',
    data: function () {
      return {
        dis: false
      }
    },
    props: ['obj', 'text', 'icon', 'iconfont'],
    computed: {
      style: {
        get: function () {
          return this.obj
        },
        set: function (v) {
          this.obj.opacity = v
        }
      }
    },
    mounted: function () {
      // this.obj.opacity = 1
    },
    methods: {
      to: function () {
        this.$emit('statr')
      },
      Starts: function (e) {
        this.style = .8
      },
      Ends: function (e) {
        this.style = 1
      }
    },
    components: {}
  }
</script>

<style scoped>
  .btn button .icon-jinru {
    font-size: 1.4rem;
    position: relative;
    left: -.3rem;
    top:-.1rem;
  }

  .btn button .icon-jinruwodezhuanshu {
    font-size: .6rem;
  }

  .btn button img {
    width: .7rem;
    position: relative;
    top: -.05rem;
    left: -.1rem;
  }
</style>
